<template>
  <div id="analysis">  
    <el-form ref="form" :model="form" label-width="80px">  
     <el-row> 
        <el-col :span="20" style="display:flex;">
            <div style="line-height: 40px;font-weight:bold:">数据列表</div>

              <el-form-item label="" label-width="0px" style="margin-left:10px;">
                <el-select  v-model="form.select_td_num" placeholder="请选择团队" style="width:150px;">
                    <el-option  v-for="(item,index) in select_td_data" :key="index" :label="item.telphone" :value="item.uid" ></el-option>
                </el-select>
            </el-form-item>

            <!-- <el-form-item label="持有数量" label-width="80px" >
                <div style="display: flex;">
                    <el-input style="width:80px;" v-model.number="form.number1" placeholder=""></el-input>
                    <div style="width:20px;height:40px;line-height:40px;text-align: center;"> - </div>
                    <el-input  style="width:80px;" v-model.number="form.number2" placeholder=""></el-input>
                </div>
          </el-form-item> 

          <el-form-item label="持有金额" label-width="80px" >
                <div style="display: flex;">
                    <el-input style="width:80px;" v-model.number="form.number3" placeholder=""></el-input>
                    <div style="width:20px;height:40px;line-height:40px;text-align: center;"> - </div>
                    <el-input  style="width:80px;" v-model.number="form.number4" placeholder=""></el-input>
                </div>
          </el-form-item>  -->
            <div class="custom_button2"  style="margin-left:10px;" @click="search_but()" ></div>
        </el-col> 
        <el-col :span="4" style="text-align: center;display: flex;justify-content: flex-end;">
            <el-button type="primary" v-if="export_type" class="custom_color_button" style="margin-right:10px;"  @click="output">是否导出</el-button> 
            <el-button type="primary" v-if="export_type1" class="custom_color_button" style="margin-right:10px;"  @click="output1">导出-{{ export_title }}</el-button>        
            <div class="custom_button_width" @click="set_but()" style="margin-right:10px;">设置</div>
            <div class="custom_button_width" @click="sx_but()">刷新</div>
        </el-col> 
    </el-row> 
   
   </el-form>
   
   
   <analysisList :datalist="datalist" @up_list_fun="list_fun"  :loading="loading"></analysisList>
   
     <div style="margin-top:20px;text-align: center;">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :page-size="10"  
        layout="prev, pager, next, jumper"
        :total="count">
      </el-pagination>
    </div>



     <el-dialog title="预警设置" :visible.sync="mtk"  width="400px" >
          <el-form ref="form"  label-width="100px" style="width:100%;">
                 <el-form-item v-for="(item,index) in zy_datalist" :key="index" :label="item.title" label-width="80px" >
                    <div style="display: flex;">
                        <el-input style="width:80px;" v-model="item.warning_one" placeholder="" @blur="warning(item.warning_one,item.min_price,item.max_price,index,'one')"></el-input>
                        <div style="width:20px;height:40px;line-height:40px;text-align: center;"> - </div>
                        <el-input  style="width:80px;" v-model="item.warning_two" placeholder="" @blur="warning(item.warning_two,item.min_price,item.max_price,index,'two')"></el-input>
                    </div>
                  </el-form-item> 
                 <div style="text-align: center;width:50%;margin:auto;margin-top:20px;">
                     <el-button type="primary" class="custom_color_button" style="width:100%;" @click="mtk_but_qr()">确认</el-button>
                 </div>
         </el-form>
   </el-dialog> 



     <!-- 导出表格数据表格 -->
        <el-table v-show="false" :data="export_datalist" id="mytable" style="width: 100%;height:10px;">
                
                <el-table-column label="名称"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span>{{ scope.row.nickname }}</span>
                    </template>
                </el-table-column>
                 <el-table-column label="手机号"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span>{{ scope.row.telphone }}</span>
                    </template>
                </el-table-column>
                  <el-table-column label="推荐人"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span>{{ scope.row.inviter_telphone }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="总收益"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span>{{ scope.row.all_earn }}</span>
                    </template>
                </el-table-column>
                 <el-table-column :label="variable_name1"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span>{{ scope.row.kmb }}</span>
                    </template>
                </el-table-column>
                 <el-table-column :label="variable_name2"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span>{{ scope.row.gdb }}</span>
                    </template>
                </el-table-column>
                 <el-table-column label="持有金额"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span>{{ scope.row.holding_all_price }}</span>
                    </template>
                </el-table-column>
                 <el-table-column label="持有数量"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span>{{ scope.row.holding_count }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="待收货数量"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span>{{ scope.row.wait_harvest }}</span>
                    </template>
                </el-table-column>
                 <el-table-column label="待收货价值"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span>{{ scope.row.wait_harvest_price }}</span>
                    </template>
                </el-table-column>
      
        </el-table> 


  </div>
</template>

<script>

import FileSaver from 'file-saver'
import XLSX from 'xlsx'

import AnalysisList from '@/view/Operationdata/Analysis/AnalysisList'
export default {
  name: 'analysis',
  data () {
    return {
       pickerOptions: { // 计费日期的约束条件
        disabledDate(time) {
            return time.getTime() < new Date('2021-02').getTime()
            }
      },
      datalist:[],
      page:1,
      count:0,
      form:{
          number1:'',
          number2:'',
          number3:'',
          number4:'',
          select_td_num:'',
      },
      mtk:false,
      zy_datalist:[],
      select_td_data:[],
      export_type:false,
      export_type1:false,
      export_datalist:[],
      export_title:'不可导出',
      loading:true,
    }
  },
   components:{
      AnalysisList
  },
  created(){
       this.list_fun()
       this.td_list()
  },
  mounted (){
      
  },
  methods: {
    td_list(){
        this.post("/Statistics/listOfLeader", {
        
	        }).then(res => {
            this.select_td_data = res.result       
            //console.log(this.select_td_data)
         })
     },
    list_zy(){
      this.post("/early_warn/listOfWarningNum", {
       }).then(res => { 
           this.zy_datalist = res.result 
           //console.log(res.result,"zy")       
       })
    },
    list_fun(){
        this.post("/early_warn/listOfMember", {
              page:this.page,
              leader_uid:this.form.select_td_num,
              search_all:0  //0 分页 1 全部
	         }).then(res => {
            this.count = res.result.count
            this.datalist = res.result.list
            this.loading = false
            console.log(res,"ssss")
          })
    },
    select_change(){
      
    },
    set_but(){
       this.list_zy()
       this.mtk = true
    },
    mtk_but_qr(){
      // console.log(this.zy_datalist)    
       this.post("/early_warn/setWarningNum", {
                arr:this.zy_datalist
            }).then(res => {
                if(res.error_code == 0){
                    this.open1(res.result,'success')  //提示框
                    this.mtk = false
                    this.list_zy()
                }else {
                this.open1(res.message,'warning')
                }

       })
           
    },
    warning(warning_num,min,max,index,type){
     
      if(parseInt(warning_num)>=parseInt(min) && parseInt(warning_num)<parseInt(max)){
              //console.log(warning_num,min,max)
      }else{
            if(type == 'one'){
                this.zy_datalist[index].warning_one = 0  
            }else if(type == 'two'){
               this.zy_datalist[index].warning_two = 0
            }
            this.open1('请输入区间在'+min+'-'+max,'warning')
      }
           
    },
    search_but(){
       this.loading = true
       if(this.form.number1 == ''  && this.form.number2 == '' && this.form.number3 == '' && this.form.number4 == '' && this.form.select_td_num != ''){ //是否出现导出按钮
              
             this.export_type = true
             this.export_type1 = false
             this.export_datalist = []
             this.export_title = "不可导出"
            
        }else{
             this.export_type = false
             this.export_type1 = false
             this.export_datalist = []
             this.export_title = "不可导出"
        }
        this.page = 1
        this.list_fun()
    },
    export_fun(){
        this.export_datalist = []
        let contnum = Math.ceil(this.count/10);
         const loading = this.$loading({   //视频上传遮罩层
                lock: true,
                text: '加载中，请耐心等待',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
         });
        for (let i = 1; i <= contnum; i++) {

           this.post("/early_warn/listOfMember", {
              page:i,
              leader_uid:this.form.select_td_num,
              search_all:0 //0 分页 1 全部
	          }).then(res => {

              for(let item of res.result.list) {
                  this.export_datalist.push(item)
              }
              console.log(this.export_datalist) 
              
              console.log(i)
              // if(i == contnum){
              //    this.export_title = "可导出"
              //    this.export_type = false
              //    this.export_type1 = true
              //    loading.close();  //关闭视频上传遮罩层
              // }
              if(this.export_datalist.length == this.count){
                 this.export_title = "可导出"
                 this.export_type = false
                 this.export_type1 = true
                 loading.close();  //关闭视频上传遮罩层
              }
              
           })
       
         
        }
      },
      output() {
         this.export_fun()     
      },
      output1(){
          if(this.form.number1 == ''  && this.form.number2 == '' && this.form.number3 == '' && this.form.number4 == '' && this.form.select_td_num != ''){ //是否出现导出按钮
               
              var wb = XLSX.utils.table_to_book(document.querySelector("#mytable"));//mytable为表格的id名
              var wbout = XLSX.write(wb, {
                bookType: "xlsx",
                bookSST: true,
                type: "array"
              });
              try {
                FileSaver.saveAs(
                  new Blob([wbout], { type: "application/octet-stream" }),
                  "sheet.xlsx"
                );
              } catch (e) {
                if (typeof console !== "undefined") console.log(e, wbout);
              }
              return wbout;   

        }else{
            this.export_datalist = []
             this.export_title = "不可导出"
            this.open1('只能导出搜索团队的数据','success')  //提示框
           
        }
      },
    sx_but(){
        this.loading = true
        this.page = 1
        this.form.select_td_num = ''
        this.export_type=false
        this.export_type1=false
        this.export_datalist=[]
        this.list_fun()
    },
    handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
         this.loading = true
         if(this.form.number1 == ''  && this.form.number2 == '' && this.form.number3 == '' && this.form.number4 == '' && this.form.select_td_num != ''){ //是否出现导出按钮
              
             this.export_type = true
             this.export_type1 = false
             this.export_datalist = []
             this.export_title = "不可导出"
            
        }else{
             this.export_type = false
             this.export_type1 = false
             this.export_datalist = []
             this.export_title = "不可导出"
        }
        this.page = val
        this.list_fun()
        console.log(`当前页: ${val}`);
      }
  }
}
</script>


<style scoped>
.see_but{
    width: 90px;
    height: 30px;
    background: #B3C0D1;
    border-radius: 18px;
    text-align: center;
    line-height: 30px;
    color:white;
    font-size: 14px;
    cursor: pointer;
}
</style>
